<template>
  <div :class="{ 'tab-bar-visible': showTabBar }" class="mobile-layout">
    <!-- 移动端顶部导航栏 -->
    <header class="mobile-header glass-card">
      <div class="header-content">
        <!-- 左侧操作区 -->
        <div class="header-left">
          <button
            v-if="showBackButton"
            class="back-btn"
            @click="handleBack"
          >
            <tiny-icon-chevron-left />
          </button>
          <button
            v-else
            class="menu-btn"
            @click="toggleSidebar"
          >
            <tiny-icon-menu />
          </button>
        </div>

        <!-- 中央标题区 -->
        <div class="header-center">
          <h1 class="page-title">{{ pageTitle }}</h1>
          <p v-if="pageSubtitle" class="page-subtitle">{{ pageSubtitle }}</p>
        </div>

        <!-- 右侧操作区 -->
        <div class="header-right">
          <button
            v-if="showSearch"
            class="action-btn"
            @click="toggleSearch"
          >
            <tiny-icon-search />
          </button>
          <button
            v-if="showNotification"
            class="action-btn notification-btn"
            @click="openNotifications"
          >
            <tiny-icon-bell />
            <span v-if="notificationCount > 0" class="notification-badge">
              {{ notificationCount > 99 ? '99+' : notificationCount }}
            </span>
          </button>
          <button
            v-if="showMore"
            class="action-btn"
            @click="openMoreMenu"
          >
            <tiny-icon-more />
          </button>
        </div>
      </div>

      <!-- 搜索栏 -->
      <div v-show="searchVisible" class="search-container">
        <div class="search-bar">
          <tiny-icon-search class="search-icon" />
          <input
            ref="searchInput"
            v-model="searchQuery"
            class="search-input"
            placeholder="搜索媒体文件、标签..."
            type="text"
            @keyup.enter="handleSearch"
          />
          <button
            v-if="searchQuery"
            class="clear-btn"
            @click="clearSearch"
          >
            <tiny-icon-close />
          </button>
        </div>
        <button class="search-cancel" @click="toggleSearch">
          取消
        </button>
      </div>
    </header>

    <!-- 侧边栏 -->
    <aside
      :class="{ 'sidebar-open': sidebarVisible }"
      class="mobile-sidebar"
      @click="closeSidebar"
    >
      <div class="sidebar-content" @click.stop>
        <!-- 用户信息 -->
        <div class="user-profile">
          <div class="user-avatar">
            <img
              v-if="userInfo.avatar"
              :alt="userInfo.nickname"
              :src="userInfo.avatar"
            />
            <tiny-icon-user v-else />
          </div>
          <div class="user-info">
            <div class="user-name">{{ userInfo.nickname || '未登录' }}</div>
            <div class="user-email">{{ userInfo.email || '' }}</div>
          </div>
        </div>

        <!-- 导航菜单 -->
        <nav class="sidebar-nav">
          <router-link
            v-for="item in navigationItems"
            :key="item.name"
            :class="{ active: $route.path.startsWith(item.path) }"
            :to="item.path"
            class="nav-item"
            @click="closeSidebar"
          >
            <component :is="item.icon" class="nav-icon" />
            <span class="nav-text">{{ item.label }}</span>
            <tiny-icon-chevron-right class="nav-arrow" />
          </router-link>
        </nav>

        <!-- 快捷操作 -->
        <div class="quick-actions">
          <button class="quick-action-btn" @click="openUpload">
            <tiny-icon-plus />
            <span>上传文件</span>
          </button>
          <button class="quick-action-btn" @click="openCamera">
            <tiny-icon-camera />
            <span>拍照</span>
          </button>
        </div>

        <!-- 设置区域 -->
        <div class="sidebar-footer">
          <button class="footer-btn" @click="openSettings">
            <tiny-icon-setting />
            <span>设置</span>
          </button>
          <button class="footer-btn" @click="handleLogout">
            <tiny-icon-logout />
            <span>退出</span>
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="mobile-main">
      <div class="content-wrapper">
        <router-view v-slot="{ Component, route }">
          <transition mode="out-in" name="page">
            <component :is="Component" :key="route.path" />
          </transition>
        </router-view>
      </div>
    </main>

    <!-- 底部标签栏 -->
    <nav v-if="showTabBar" class="mobile-tab-bar glass-card">
      <router-link
        v-for="tab in tabBarItems"
        :key="tab.name"
        :class="{ active: isTabActive(tab.path) }"
        :to="tab.path"
        class="tab-item"
      >
        <component :is="tab.icon" class="tab-icon" />
        <span class="tab-text">{{ tab.label }}</span>
        <div v-if="tab.badge" class="tab-badge">{{ tab.badge }}</div>
      </router-link>
    </nav>

    <!-- 浮动操作按钮 -->
    <div v-if="showFab" class="floating-action-button">
      <button class="fab-main" @click="toggleFabMenu">
        <tiny-icon-plus :class="{ 'fab-rotated': fabMenuVisible }" />
      </button>

      <transition name="fab-menu">
        <div v-show="fabMenuVisible" class="fab-menu">
          <button
            v-for="action in fabActions"
            :key="action.name"
            :style="{ '--delay': action.delay }"
            class="fab-action"
            @click="handleFabAction(action)"
          >
            <component :is="action.icon" />
            <span class="fab-label">{{ action.label }}</span>
          </button>
        </div>
      </transition>
    </div>

    <!-- 遮罩层 -->
    <div
      v-show="sidebarVisible || fabMenuVisible"
      class="mobile-overlay"
      @click="closeAllMenus"
    ></div>

    <!-- 消息提示 -->
    <transition name="toast">
      <div v-if="toastMessage" class="mobile-toast">
        <component :is="toastIcon" class="toast-icon" />
        <span class="toast-text">{{ toastMessage }}</span>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { TinyMessage as Message } from '@opentiny/vue'

// 路由和状态
const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 响应式数据
const sidebarVisible = ref(false)
const searchVisible = ref(false)
const searchQuery = ref('')
const searchInput = ref<HTMLInputElement>()
const fabMenuVisible = ref(false)
const toastMessage = ref('')
const toastIcon = ref('tiny-icon-check')
const notificationCount = ref(3)

// 计算属性
const userInfo = computed(() => authStore.userInfo || {})
const pageTitle = computed(() => route.meta?.title || '家庭媒体')
const pageSubtitle = computed(() => route.meta?.subtitle || '')

// 显示控制
const showBackButton = computed(() => {
  // 在详情页面显示返回按钮
  return route.name?.toString().includes('Detail') ||
         route.name?.toString().includes('Edit') ||
         route.path.includes('/upload') ||
         route.path.includes('/ai-classify')
})

const showTabBar = computed(() => {
  // 在主要页面显示底部标签栏
  const mainPages = ['/', '/media', '/diary', '/family', '/settings']
  return mainPages.some(page => route.path === page || route.path.startsWith(page + '/'))
})

const showSearch = computed(() => {
  return route.path.includes('/media') || route.path.includes('/diary')
})

const showNotification = computed(() => {
  return !route.path.includes('/login') && !route.path.includes('/register')
})

const showMore = computed(() => {
  return route.path.includes('/media') || route.path.includes('/diary')
})

const showFab = computed(() => {
  return route.path.includes('/media') && !route.path.includes('/upload')
})

// 导航配置
const navigationItems = [
  { name: 'dashboard', path: '/', label: '控制台', icon: 'tiny-icon-home' },
  { name: 'media', path: '/media', label: '媒体文件', icon: 'tiny-icon-image' },
  { name: 'diary', path: '/diary', label: '日记本', icon: 'tiny-icon-edit' },
  { name: 'family', path: '/family', label: '家庭管理', icon: 'tiny-icon-group' },
  { name: 'ai', path: '/media/ai-classify', label: 'AI智能', icon: 'tiny-icon-magic' }
]

const tabBarItems = [
  { name: 'home', path: '/', label: '首页', icon: 'tiny-icon-home' },
  { name: 'media', path: '/media', label: '媒体', icon: 'tiny-icon-image' },
  { name: 'diary', path: '/diary', label: '日记', icon: 'tiny-icon-edit' },
  { name: 'family', path: '/family', label: '家庭', icon: 'tiny-icon-group' },
  { name: 'profile', path: '/settings', label: '我的', icon: 'tiny-icon-user' }
]

const fabActions = [
  {
    name: 'upload',
    icon: 'tiny-icon-upload',
    label: '上传文件',
    delay: '0.1s',
    action: () => router.push('/media/upload')
  },
  {
    name: 'camera',
    icon: 'tiny-icon-camera',
    label: '拍照',
    delay: '0.2s',
    action: () => openCamera()
  },
  {
    name: 'ai',
    icon: 'tiny-icon-magic',
    label: 'AI分类',
    delay: '0.3s',
    action: () => router.push('/media/ai-classify')
  }
]

// 方法
const toggleSidebar = () => {
  sidebarVisible.value = !sidebarVisible.value
}

const closeSidebar = () => {
  sidebarVisible.value = false
}

const toggleSearch = async () => {
  searchVisible.value = !searchVisible.value
  if (searchVisible.value) {
    await nextTick()
    searchInput.value?.focus()
  } else {
    searchQuery.value = ''
  }
}

const clearSearch = () => {
  searchQuery.value = ''
  searchInput.value?.focus()
}

const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push(`/media?search=${encodeURIComponent(searchQuery.value)}`)
    toggleSearch()
  }
}

const handleBack = () => {
  router.back()
}

const openNotifications = () => {
  showToast('暂未实现通知功能', 'tiny-icon-info')
}

const openMoreMenu = () => {
  // 实现更多菜单逻辑
  showToast('更多功能开发中', 'tiny-icon-info')
}

const toggleFabMenu = () => {
  fabMenuVisible.value = !fabMenuVisible.value
}

const handleFabAction = (action: any) => {
  action.action()
  fabMenuVisible.value = false
}

const closeAllMenus = () => {
  sidebarVisible.value = false
  fabMenuVisible.value = false
}

const isTabActive = (path: string) => {
  if (path === '/') {
    return route.path === '/'
  }
  return route.path.startsWith(path)
}

const openUpload = () => {
  router.push('/media/upload')
  closeSidebar()
}

const openCamera = () => {
  // 实现相机功能
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    showToast('相机功能开发中', 'tiny-icon-camera')
  } else {
    showToast('设备不支持相机功能', 'tiny-icon-warning')
  }
}

const openSettings = () => {
  router.push('/settings')
  closeSidebar()
}

const handleLogout = async () => {
  try {
    await authStore.logout()
    router.push('/login')
    showToast('已安全退出', 'tiny-icon-check')
  } catch (error) {
    showToast('退出失败', 'tiny-icon-close')
  }
}

const showToast = (message: string, icon = 'tiny-icon-check') => {
  toastMessage.value = message
  toastIcon.value = icon
  setTimeout(() => {
    toastMessage.value = ''
  }, 3000)
}

// 监听路由变化，关闭菜单
watch(() => route.path, () => {
  closeAllMenus()
  searchVisible.value = false
  searchQuery.value = ''
})

// 处理物理返回键（Android）
const handlePhysicalBack = (event: PopStateEvent) => {
  if (sidebarVisible.value || fabMenuVisible.value) {
    event.preventDefault()
    closeAllMenus()
  }
}

onMounted(() => {
  window.addEventListener('popstate', handlePhysicalBack)
})

onUnmounted(() => {
  window.removeEventListener('popstate', handlePhysicalBack)
})
</script>

<style lang="scss" scoped>
.mobile-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: $gradient-primary;
  overflow: hidden;

  &.tab-bar-visible {
    .mobile-main {
      padding-bottom: 80px;
    }
  }

  // 移动端头部
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $z-index-fixed;
    padding: env(safe-area-inset-top) $spacing-4 $spacing-3;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 44px;

      .header-left,
      .header-right {
        display: flex;
        align-items: center;
        gap: $spacing-2;
        min-width: 60px;

        .back-btn,
        .menu-btn,
        .action-btn {
          width: 44px;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: transparent;
          border: none;
          border-radius: $radius-full;
          color: $gray-700;
          font-size: 20px;
          cursor: pointer;
          transition: all $duration-fast ease;

          &:hover {
            background: rgba($gray-500, 0.1);
          }

          &:active {
            transform: scale(0.95);
          }
        }

        .notification-btn {
          position: relative;

          .notification-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            min-width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: $error;
            color: white;
            border-radius: $radius-full;
            font-size: 10px;
            font-weight: $font-weight-semibold;
            padding: 0 4px;
          }
        }
      }

      .header-right {
        justify-content: flex-end;
      }

      .header-center {
        flex: 1;
        text-align: center;
        margin: 0 $spacing-4;

        .page-title {
          font-size: $font-size-lg;
          font-weight: $font-weight-semibold;
          color: $gray-800;
          margin: 0;
          line-height: 1.2;
        }

        .page-subtitle {
          font-size: $font-size-xs;
          color: $gray-500;
          margin: 0;
          line-height: 1;
        }
      }
    }

    .search-container {
      display: flex;
      align-items: center;
      gap: $spacing-3;
      margin-top: $spacing-3;
      padding-top: $spacing-3;
      border-top: 1px solid rgba(255, 255, 255, 0.1);

      .search-bar {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.8);
        border-radius: $radius-full;
        padding: 0 $spacing-4;

        .search-icon {
          color: $gray-400;
          font-size: 16px;
          margin-right: $spacing-2;
        }

        .search-input {
          flex: 1;
          border: none;
          background: transparent;
          font-size: $font-size-base;
          color: $gray-800;
          outline: none;
          padding: $spacing-3 0;

          &::placeholder {
            color: $gray-400;
          }
        }

        .clear-btn {
          background: transparent;
          border: none;
          color: $gray-400;
          font-size: 16px;
          cursor: pointer;
          padding: $spacing-1;
          margin-left: $spacing-2;
        }
      }

      .search-cancel {
        background: transparent;
        border: none;
        color: $primary-500;
        font-size: $font-size-base;
        font-weight: $font-weight-medium;
        cursor: pointer;
        padding: $spacing-2;
      }
    }
  }

  // 侧边栏
  .mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: $z-index-modal;
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    transition: transform $duration-normal ease;

    &.sidebar-open {
      transform: translateX(0);
    }

    .sidebar-content {
      width: 280px;
      height: 100%;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
      display: flex;
      flex-direction: column;

      .user-profile {
        display: flex;
        align-items: center;
        gap: $spacing-3;
        padding: $spacing-6 $spacing-4 $spacing-4;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .user-avatar {
          width: 48px;
          height: 48px;
          border-radius: $radius-full;
          background: $gradient-primary;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .tiny-icon-user {
            color: white;
            font-size: 20px;
          }
        }

        .user-info {
          flex: 1;

          .user-name {
            font-size: $font-size-base;
            font-weight: $font-weight-semibold;
            color: $gray-800;
            margin-bottom: 2px;
          }

          .user-email {
            font-size: $font-size-sm;
            color: $gray-500;
          }
        }
      }

      .sidebar-nav {
        flex: 1;
        padding: $spacing-2 0;

        .nav-item {
          display: flex;
          align-items: center;
          gap: $spacing-3;
          padding: $spacing-3 $spacing-4;
          color: $gray-700;
          text-decoration: none;
          transition: all $duration-fast ease;

          &:hover {
            background: rgba($primary-500, 0.1);
            color: $primary-600;
          }

          &.active {
            background: rgba($primary-500, 0.15);
            color: $primary-600;
            border-right: 3px solid $primary-500;
          }

          .nav-icon {
            font-size: 20px;
          }

          .nav-text {
            flex: 1;
            font-size: $font-size-base;
            font-weight: $font-weight-medium;
          }

          .nav-arrow {
            font-size: 16px;
            color: $gray-400;
          }
        }
      }

      .quick-actions {
        padding: $spacing-4;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .quick-action-btn {
          width: 100%;
          display: flex;
          align-items: center;
          gap: $spacing-3;
          padding: $spacing-3;
          background: $gradient-primary;
          border: none;
          border-radius: $radius-lg;
          color: white;
          font-size: $font-size-base;
          font-weight: $font-weight-medium;
          cursor: pointer;
          transition: all $duration-fast ease;
          margin-bottom: $spacing-2;

          &:last-child {
            margin-bottom: 0;
          }

          &:hover {
            transform: translateY(-1px);
            box-shadow: $shadow-lg;
          }
        }
      }

      .sidebar-footer {
        padding: $spacing-4;

        .footer-btn {
          width: 100%;
          display: flex;
          align-items: center;
          gap: $spacing-3;
          padding: $spacing-3;
          background: transparent;
          border: 1px solid rgba($gray-300, 0.5);
          border-radius: $radius-lg;
          color: $gray-600;
          font-size: $font-size-base;
          cursor: pointer;
          transition: all $duration-fast ease;
          margin-bottom: $spacing-2;

          &:last-child {
            margin-bottom: 0;
            border-color: rgba($error, 0.3);
            color: $error;
          }

          &:hover {
            background: rgba($gray-500, 0.05);
          }
        }
      }
    }
  }

  // 主内容区
  .mobile-main {
    flex: 1;
    margin-top: 100px; // 头部高度
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    .content-wrapper {
      min-height: 100%;
      padding: $spacing-4;
    }
  }

  // 底部标签栏
  .mobile-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: $spacing-2 $spacing-1 calc(env(safe-area-inset-bottom) + #{$spacing-2});
    z-index: $z-index-fixed;

    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: $spacing-2;
      color: $gray-500;
      text-decoration: none;
      transition: all $duration-fast ease;
      position: relative;

      &.active {
        color: $primary-500;

        .tab-icon {
          transform: scale(1.1);
        }
      }

      .tab-icon {
        font-size: 20px;
        transition: transform $duration-fast ease;
      }

      .tab-text {
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
      }

      .tab-badge {
        position: absolute;
        top: 4px;
        right: 20px;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $error;
        color: white;
        border-radius: $radius-full;
        font-size: 10px;
        font-weight: $font-weight-semibold;
        padding: 0 4px;
      }
    }
  }

  // 浮动操作按钮
  .floating-action-button {
    position: fixed;
    bottom: 100px;
    right: $spacing-4;
    z-index: $z-index-modal;

    .fab-main {
      width: 56px;
      height: 56px;
      background: $gradient-primary;
      border: none;
      border-radius: $radius-full;
      color: white;
      font-size: 24px;
      cursor: pointer;
      box-shadow: $shadow-lg;
      transition: all $duration-normal ease;

      &:hover {
        transform: scale(1.05);
        box-shadow: $shadow-xl;
      }

      .fab-rotated {
        transform: rotate(45deg);
      }
    }

    .fab-menu {
      position: absolute;
      bottom: 70px;
      right: 0;
      display: flex;
      flex-direction: column;
      gap: $spacing-3;

      .fab-action {
        display: flex;
        align-items: center;
        gap: $spacing-2;
        padding: $spacing-3 $spacing-4;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: none;
        border-radius: $radius-full;
        color: $gray-700;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        cursor: pointer;
        box-shadow: $shadow-md;
        transition: all $duration-fast ease;
        animation: fabSlideIn $duration-normal var(--delay) both;

        &:hover {
          transform: translateX(-4px);
          box-shadow: $shadow-lg;
        }

        .fab-label {
          white-space: nowrap;
        }
      }
    }
  }

  // 遮罩层
  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: $z-index-modal-backdrop;
  }

  // 消息提示
  .mobile-toast {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-3 $spacing-4;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: $radius-full;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    z-index: $z-index-toast;
    backdrop-filter: blur(10px);

    .toast-icon {
      font-size: 16px;
    }
  }
}

// 动画
@keyframes fabSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

// 过渡效果
.page-enter-active,
.page-leave-active {
  transition: all $duration-normal ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

.fab-menu-enter-active,
.fab-menu-leave-active {
  transition: all $duration-fast ease;
}

.fab-menu-enter-from,
.fab-menu-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.toast-enter-active,
.toast-leave-active {
  transition: all $duration-normal ease;
}

.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}

// 安全区域适配
@supports (padding: max(0px)) {
  .mobile-header {
    padding-top: max(env(safe-area-inset-top), $spacing-4);
  }

  .mobile-tab-bar {
    padding-bottom: max(env(safe-area-inset-bottom), $spacing-2);
  }
}

// 暗色主题
[data-theme="dark"] {
  .mobile-layout {
    background: $dark-gradient-primary;

    .mobile-header,
    .mobile-tab-bar {
      background: rgba(0, 0, 0, 0.8);
      border-color: rgba(255, 255, 255, 0.1);

      .page-title {
        color: $gray-200;
      }

      .page-subtitle {
        color: $gray-400;
      }

      .action-btn,
      .back-btn,
      .menu-btn {
        color: $gray-300;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .mobile-sidebar .sidebar-content {
      background: rgba(0, 0, 0, 0.9);

      .user-name {
        color: $gray-200;
      }

      .nav-item {
        color: $gray-300;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
          color: $primary-400;
        }

        &.active {
          background: rgba($primary-500, 0.2);
          color: $primary-400;
        }
      }
    }

    .mobile-toast {
      background: rgba(255, 255, 255, 0.1);
      color: $gray-200;
    }
  }
}
</style>
